<template>
    <div class="wrapper">
        <swiper :options="swiperOption" class="swiper-container" >
        <!-- slides -->
        <swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
            <img class='swiper-img' :src='item.image' alt="" />
        </swiper-slide>
        <!-- Optional controls ,显示小点-->
        <div class="swiper-pagination"  slot="pagination"></div>
       
    </swiper>
  </div>
</template>
<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import axios from 'axios'
import '../mock/mock.js'
export default {
    name:'IndexSwipper',
    //es6的写法，相当于data:function(){return{swiperOption:{}}}
    data(){
        return{
            swiperOption:{
                // slidePerView:3,
                // slidesPerGroup: 3,
                // spaceBetween: 10,
                // 参数选项,显示小点
                pagination:'.swiper-pagination',
                //循环
                loop:true,
                //每张播放时长3秒，自动播放
                autoplay:2000,
                //滑动速度
                // speed:1000,
                // delay:1000
                
               
            },
            //三张轮播，使用变量循环
            swiperList:[ ]
        }
    },
    components:{
    swiper,
    swiperSlide
  },
  methods:{
     getImgindex(){
         axios({
             method:'get',
             url:'/infor'
         }).then((res)=>{
             console.log(res.data)
            //  console.log(res.data.indexList);
             this.swiperList=res.data.indexList;
         }).catch((err)=>{
             console.log('首页异常',err)
         })
     }
  },
  mounted:function(){
      this.getImgindex();
  }
}
</script>
<style lang='scss' scoped>
// >>>穿透作用，因为swiper-pagination-bullet-active类在组件内部定义的，想要wrapper也能作用到，可以用>>>
    .wrapper .swiper-pagination-bullet-active{
     background-color:  #fff !important
    }   
    .wrapper
        {
        overflow:hidden;
        width:100%;
        // height:0;
        padding-bottom:16.6666667%;
        // background-color:#ccc;
        }
        .swiper-item
          {
                width:100%
          }
        .swiper-img
                {
                    width:80%;
                    height: 400px;
                
                }
</style>
